import QtQuick 2.0
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1

Rectangle{
    width: 320; height: 240
    color: "black"

    QtObject{
        id: attrs
        property int counter;
        Component.onCompleted: { attrs.counter = 10}
    }

    Text{
        id: countShow
        anchors.centerIn: parent
        color: "blue"
        font.pixelSize: 50
    }

    Timer{
        id: cutDown
        interval: 1000
        repeat: true
        triggeredOnStart: true
        onTriggered: {
            countShow.text = attrs.counter
            countShow.color = Qt.rgba(Math.random(),Math.random(),
                                      Math.random(),1)
            attrs.counter -= 1;
            if (attrs.counter < 0){
                cutDown.stop();
                countShow.text = "Time out"
                attrs.counter = 10
                startBtn.enabled = true
            }
        }
    }

    Button{
        id: startBtn
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 20
        anchors.horizontalCenter: parent.horizontalCenter
        text: "Start"
        style: Component{
            ButtonStyle{
                background: Rectangle{
                    implicitHeight: 40; implicitWidth: 160
                    radius: 20;
                    border.width: control.hovered ? 2 : 1
                    border.color: control.hovered ? "lightgreen":"white"
                    color: control.hovered? "white" : "lightgreen"
                }
            }
        }

        onClicked: {
            cutDown.start();
            startBtn.enabled = false
        }
    }

    Component.onCompleted: {

    }
}
